<template>
  <div style="width: 60%; margin: 30px auto">
    <div style="font-size: 40px; font-weight: bold; text-align: center">{{ data.plantInfo.chineseName }}</div>
    <div style="margin-top: 15px; color: #666666; text-align: center">
      <span>发布人：{{ data.plantInfo.createdByUsername }}</span>
      <span style="margin-left: 30px">发布时间：{{ data.plantInfo.createdAt }}</span>
    </div>
    <hr class="divider">
    <div style="margin-top: 50px" v-html="data.plantInfo.plantDetails"></div>

    <div style="margin-top: 50px">
      <h2>相关种植指南</h2>
      <div v-if="data.guides.length > 0" class="guides-container">
        <el-card v-for="guide in data.guides" :key="guide.id" class="box-card" shadow="hover" @click="navigateToGuide(guide.id)" style="break-inside: avoid;">
          <div slot="header" class="clearfix">
            <span class="guide-title">{{ guide.title }}</span>
          </div>
          <div class="content">
            {{ guide.plantChineseName }} - {{ guide.plantLatinName }}
          </div>
          <div v-if="guide.img" class="images">
            <img :src="guide.img" alt="" class="image">
          </div>
        </el-card>
      </div>
      <div v-else>
        <el-empty description="暂无种植指南"></el-empty>
      </div>
    </div>

    <div v-if="data.total > data.pageSize" style="margin: 20px 0; text-align: center;">
      <el-pagination
          @current-change="handleCurrentChange"
          background
          layout="prev, pager, next"
          :page-size="data.pageSize"
          v-model:current-page="data.pageNum"
          :total="data.total"
      />
    </div>
  </div>
</template>

<script setup>
import { onMounted, reactive } from "vue";
import router from "@/router/index.js";
import request from "@/utils/request.js";
import { ElMessage } from "element-plus";

const data = reactive({
  user: JSON.parse(localStorage.getItem('user') || '{}'),
  id: router.currentRoute.value.query.id,
  plantInfo: {},
  guides: [],
  pageNum: 1,
  pageSize: 5,
  total: 0,
});

const loadPlantInfo = () => {
  request.get('/plantInfo/selectById/' + data.id).then(res => {
    if (res.code === '200') {
      data.plantInfo = res.data;
      console.log('Plant Info:', data.plantInfo); // 调试信息
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const loadGuides = () => {
  request.get('/plantGuide/selectPage', {
    params: {
      plantId: data.id,
      title: '',
      plantName: '',
      pageNum: data.pageNum,
      pageSize: data.pageSize,
    }
  }).then(res => {
    if (res.code === '200') {
      data.guides = res.data.list;
      data.total = res.data.total;
      console.log('Guides:', data.guides); // 调试信息
    } else {
      ElMessage.error(res.msg);
    }
  });
};

const navigateToGuide = (targetId) => {
  router.push(`/front/plantGuideDetail?id=${targetId}`);
};

const handleCurrentChange = (newPage) => {
  data.pageNum = newPage;
  loadGuides();
};

onMounted(() => {
  loadPlantInfo();
  loadGuides();
});
</script>

<style scoped>
.main-content {
  padding: 20px;
}

.guides-container {
  column-count: 2; /* 设置你想要的列数 */
  column-gap: 20px; /* 列之间的间隔 */
}

.box-card {
  width: 100%; /* 或者使用 max-width 来限制最大宽度 */
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
  box-sizing: border-box; /* 确保 padding 和 border 被包含在元素的总宽度和高度中 */
  break-inside: avoid; /* 防止卡片被分割到两个不同的列中 */
}

.box-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.guide-title {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}

.content {
  margin: 10px 0;
  font-size: 14px;
  color: #666666;
}

.images {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.image {
  max-width: 100px;
  max-height: 100px;
  object-fit: cover;
}

@media (max-width: 768px) {
  .guides-container {
    column-count: 1; /* 小屏幕时单列显示 */
  }
}
</style>
